<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>LayUI页面</title>

		<link href="js-css/dist/themes/default/easyui.css" rel="stylesheet" />
		<link href="js-css/dist/themes/icon.css" rel="stylesheet" />
		<link href="js-css/dist/themes/vue.css" rel="stylesheet" />
		<script src="js-css/vue.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
		<script src="js-css/dist/vx-easyui-min.js"></script>
		<!-- 		<script src="../../plug-in/vueEasyui/dist/locale/easyui-lang-zh_CN.js"></script>
 -->
	</head>
	<body>

		<div id="app">
			<div style="height: 35px;">
				<label>事件/方法使用示例</label>
				<button @click="btn1()"> 获取选择的行（在控制台打印）</button>
				<button @click="btn2()"> 设置选中第六行</button>
				<button @click="btn3()"> 取消选择行</button>
				<button @click="btn4()"> 清空表格</button>
				<button @click="btn5()"> 设置多选</button>
				<button @click="btn6()"> 编辑列（固定）</button>
			</div>
			<parent-datagrid ref="mychild" style="height:450px" :pagination="false"></parent-datagrid>
		</div>

		<script>
			// import 'vx-easyui/dist/themes/default/easyui.css';
			// import 'vx-easyui/dist/themes/icon.css';
			// import 'vx-easyui/dist/themes/vue.css';
			// import EasyUI from 'vx-easyui';
			// Vue.use(EasyUI);


			//定义全局参数
			var row; //选择一行使用

			//定义组件模版
			//子表格
			var sonTmp = {
				template: `
			<div>
			<h2><button @click="sonbtn1()"> 清空表格</button></h2>
			<DataGrid  
			:pagination="true"
			:pageSize="pageSize"
			:pageList="pageList"
			:pageLayout="pageLayout"
			:data="data"
			>
			    <GridColumn field="field1" title="field1">
					<template slot="body" slot-scope="cell">
					  <label v-if="cell.row.field1==0"> 否</label>
					   <label v-else> 是</label>
					</template>
			 	</GridColumn>		
			    <GridColumn field="field2" title="field2"></GridColumn>
			    <GridColumn field="field3" title="field3"></GridColumn>
			    <GridColumn field="field4" title="field4"></GridColumn>
			    <GridColumn field="field5" title="field5"></GridColumn>
			    <GridColumn field="field6" title="field6"></GridColumn>
			    <GridColumn field="field7" title="field7"></GridColumn>
			    <GridColumn field="field8" title="field8"></GridColumn>
			    <GridColumn field="field9" title="field9"></GridColumn>
			    <GridColumn field="addTime" title="时间"></GridColumn>
			</DataGrid>
			</div>`,

				data: function() {
					return {
						loading: true,
						loadMsg: "数据加载中",
						total: 100,
						pagination: true,
						pageSize: 20,
						pageList: [10, 20, 30, 40, 50],
						pageLayout: ['list', 'sep', 'first', 'prev', 'sep', 'tpl', 'sep', 'next', 'last', 'sep', 'refresh', 'info',
							'links'
						],
						data: [],

					}
				},
				created: function() {
					//自定义数据
					console.log("当前子页面接受到的父表格的行信息")
					console.log(this.$parent.row);
					var rowId = this.$parent.row.id
					var list = createData(100, rowId);
					var that = this;
					that.data = list;

				},
				mounted: function() {
					this.loading = false;

				},
				methods: {
					//按钮1
					sonbtn1: function() {
						console.log("清空表格")
						this.data = [];
					},
				}
			};


			var parentTmp = {
				template: `
                <DataGrid  ref="datagridtmp"
				:pagination="true"
				:pageSize="pageSize"
				:pageList="pageList"
				:pageLayout="pageLayout"
				:data="data"
				:showFooter="true"
				:footerData="footerData"
				:total="total"
				:loading='loading'
				:loadMsg="loadMsg"
				:virtualScroll="virtualScroll"
				:rowClicked="rowClicked"
				:selectionMode="selectionMode"
				:rowCss="rowCss"
				:columnResizing="true"
				:editMode="editMode"
				:dblclickToEdit='true'
				@rowExpand="rowExpand"
				@selectionChange="selection=$event"
				@selectRow="selectRow=$event"
				>
				
				<GridColumnGroup>
				  <GridHeaderRow>
				    <GridColumn :rowspan="2"   title="行号">
						<template slot="body" slot-scope="scope">
							  {{scope.rowIndex+1}}
						</template>
					</GridColumn>
		
				    <GridColumn :colspan="12" title="Details" ></GridColumn>
				  </GridHeaderRow>
				  <GridHeaderRow>
						<GridColumn :expander="true" width="30"></GridColumn>
						  <GridColumn field="ck" :width="50" align="center">
							 <template slot="header" slot-scope="scope">
							   <CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox>
							 </template>
							 <template slot="body" slot-scope="scope">
							   <CheckBox v-model="scope.row.selected" @checkedChange="onCheckedChange($event)"></CheckBox>
							 </template>
						 </GridColumn>
				       <GridColumn field="field1" title="field1" align="center">	
				  					<template slot="body" slot-scope="cell">
				  					  <label v-if="cell.row.field1==0"> 否</label>
				  					   <label v-else> 是</label>
				  					</template>
				  		</GridColumn>
				  
				       <GridColumn field="field2" title="field2" ></GridColumn>
				       <GridColumn field="field3" title="field3" ></GridColumn>
				       <GridColumn field="field4" title="field4" ></GridColumn>
				       <GridColumn field="field5" title="field5" ></GridColumn>
				       <GridColumn field="field6" title="field6" ></GridColumn>
				       <GridColumn field="field7" title="field7" sortable="sortable" editable="editable"></GridColumn>
				       <GridColumn field="field8" title="field8"></GridColumn>
				       <GridColumn field="field9" title="field9"></GridColumn>
				       <GridColumn field="addTime" title="时间"></GridColumn>
				     </GridHeaderRow>
				</GridColumnGroup>
				
					<template slot="detail" slot-scope="scope">	
                         <son-datagrid :scrow="scope.row"></son-datagrid>
					</template>
                </DataGrid>`,

				data: function() {
					return {
						loading: true,
						loadMsg: "数据加载中",
						total: 100,
						pagination: true,
						pageSize: 20,
						pageList: [10, 20, 30, 40, 50],
						pageLayout: ['list', 'sep', 'first', 'prev', 'sep', 'tpl', 'sep', 'next', 'last', 'sep', 'refresh', 'info',
							'links'
						],
						data: [],
						footerData: [],
						virtualScroll: false,
						allChecked: false,
						rowClicked: true,
						selectionMode: "single",
						rowCss: (row) => {
							if (row.field1 != "") {
								return {
									background: '#b8eecf',
									fontSize: '14px',
									fontStyle: 'italic'
								};
							}
							return null;
						},
						selection: null,
						sortable: true,
						editMode: 'row',
						editable: true,
					}
				},
				created: function() {
					//请求
					//var self = this;
					// axios.get('GetTableData')
					//     .then(function (response) {
					//         console.log(response.data)
					//         self.data = response.data.data;
					//    })
					//    .catch(function (error) {
					//        self.fetchError = error
					//    })

					//自定义数据
					var list = createData(100);
					var that = this;
					that.data = list;
					//选择一行
					row = list[5];
					this.footerData = [{
							field3: "Average:",
							field4: 19.8,
							field5: 60.4
						},
						{
							field3: "Total:",
							field4: 19.8,
							field5: 60.4
						}
					];
				},
				components: {
					"son-datagrid": sonTmp
				},
				computed: {
					checkedRows() {
						return this.data.filter(row =>row.selected );
					},
				},
				methods: {
					onAllCheckedChange(checked) {
						if (this.rowClicked) {
							return;
						}
						this.data = this.data.map(row => {
							return Object.assign({}, row, {
								selected: checked
							});
						});
					},
					onCheckedChange(checked) {
						this.allChecked = this.checkedRows.length === this.data.length;
						this.rowClicked = true;
						this.$nextTick(() => (this.rowClicked = false));
					},
					//展开事件
					rowExpand(row) {
						console.log("展开操作")
					},
					//选择行事件
					rowSelect(row) {
						console.log(row)
						console.log(row)
					},
					//选择行方法
					// selectRow(row) {

					// 	this.selectRow(row);
					// }
				},

			};




			//页面实例
			var app = new Vue({
				el: '#app',
				data: {
					parentDiv: null,
					parentTable: null,
				},
				//template: `<demobasic  class="mycontainer"></demobasic>`,
				components: {
					"parent-datagrid": parentTmp
				},
				created: function() {

					this.initDateFormtter();
				},
				mounted: function() {
					this.parentDiv = this.$refs.mychild;
					this.parentTable = this.$refs.mychild.$refs.datagridtmp;;
				},
				methods: {
					//时间格式化
					initDateFormtter: function() {
						//时间格式化
						Date.prototype.format = function(fmt) {
							var o = {
								"M+": this.getMonth() + 1, //月份
								"d+": this.getDate(), //日
								"h+": this.getHours(), //小时
								"m+": this.getMinutes(), //分
								"s+": this.getSeconds(), //秒
								"q+": Math.floor((this.getMonth() + 3) / 3), //季度
								"S": this.getMilliseconds() //毫秒
							};
							if (/(y+)/.test(fmt)) {
								fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
							}
							for (var k in o) {
								if (new RegExp("(" + k + ")").test(fmt)) {
									fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
								}
							}
							return fmt;
						}
						var that = this;
						setTimeout(function() {
							that.$refs.mychild.loading = false;
							//console.log(that.$refs.mychild)
						}, 1000)

					},
					//按钮1
					btn1: function() {
						console.log("获取选择的行")
						console.log(this.parentDiv.selection)
					},
					//按钮2
					btn2: function() {
						console.log("选择一行")
						this.parentTable.selectRow(row)
					},
					//按钮3
					btn3: function() {
						console.log("取消选择一行")
						var that = this;
						var unrow = this.parentDiv.selection;
						console.log(unrow)
						if (unrow instanceof Array) {
							var len = unrow.length;
							for (var i = 0; i < len; i++) {
								that.parentTable.unselectRow(unrow[0])
							}

						} else if (unrow != null) {
							that.parentTable.unselectRow(unrow)
						}
						that.parentDiv.data = that.parentDiv.data.map(row => {
							return Object.assign({}, row, {
								selected: false
							});
						});
					},
					//按钮4
					btn4: function() {
						this.parentDiv.data = [];
					},
					//按钮5
					btn5: function() {
						this.parentDiv.selectionMode = "multiple";
					},
					//按钮6
					btn6: function() {
						console.log(row)
						this.parentTable.beginEdit(row, "field7");
					},
				}
			})


			//模拟数据
			function createData(len, rowId) {
				var list = new Array();
				if (rowId == undefined) {
					rowId = "";
				}
				var field1 = rowId + "我握窝喔沃卧蜗涡硪倭";
				var field2 = rowId + "你腻逆尼拟呢妮泥伱鉨";
				var field3 = rowId + "他天她图条太同退提谈";
				var field4 = rowId + "去钱千群前请区取器却";
				var field5 = rowId + "额饿峩哦额哦呃娥讹厄";
				var field6 = rowId + "人让日入热肉仍若如然";
				var field7 = rowId + "票怕盘跑配拍屏平片破";
				var field8 = rowId + "和后会还号好很换话喝";
				var field9 = rowId + "就加交家假进叫减缴讲";
				startTime = new Date();
				startTime.setMinutes(0)
				for (var i = 1; i < len; i++) {
					var istr = i.toString();
					//设置时间
					if (i % 60 > 0) {
						startTime.setSeconds(i)
					} else {
						var setMinutes = i / 60;
						startTime.setMinutes(setMinutes)
					}
					list.push({
						"id": istr,
						"field1": "1",
						"field2": field2 + istr,
						"field3": field3 + istr,
						"field4": field4 + istr,
						"field5": field5 + istr,
						"field6": field6 + istr,
						"field7": field7 + istr,
						"field8": field8 + istr,
						"field9": field9 + istr,
						"addTime": startTime.format("yyyy-MM-dd hh:mm:ss:S"),
					})
				}

				return list;
			}
		</script>
	</body>
</html>
